How to Display a Google Map in a List Row
Description
You can add a Google Map to each row in a List control to display a locations stored in the current row as a map marker.
Discussion
A static image of a Google Map can be created and displayed in a List row. This is done using the A5.map.staticMap method. The A5.map.staticMap method makes a call to the Google Static Map API to generate a map image. It returns a URL that can then be used to set the src property for an HTML img tag.
The A5.map.staticMap method can be called in the List control's client-side template. For example, in the template below, A5.map.staticMap is called inside the src property for an img tag. Latitude and longitude, two fields in the List control, are used to define a marker that is displayed on the map in the List row:
{name} {city} {state} <img style="float:right;" src="{@A5.map.staticMap(\{width:200, height:200, markers:[\location{ latitude + ',' + longitude \}], zoom:10\}]}" />Watch the videos below to learn more. The first video discusses using the A5.map.staticMap method in the List control template. The second shows how to use the Static Map Builder to generate the List control template for you.
Download the Component shown in the videos
See Also